<template>
  <div>
    <el-dialog
      title="Operation Log"
      :visible.sync="appsDialogVisible"
      width="960px"
      :before-close="resetDialog">
      <el-table height="637" v-loading="loading"
        :data="data"
        style="width: 100%;border:1px solid #DCDFE6">
        <el-table-column
          width="100"
          label="Type">
          <template slot-scope="scope">
            <span>{{submitTypeHander(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="submitDesc"
          show-overflow-tooltip
          label="Submit Description">
        </el-table-column>
        <el-table-column
          prop="appVersion"
          label="AppVersion">
        </el-table-column>
        <el-table-column width="180" label="Date">
          <template slot-scope="scope">
            {{formatDate( scope.row.updateTime,'MM/DD/YYYY HH:mm')}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="Status">
          <template slot-scope="scope">
            <span style="height: 20px;line-height: 20px;border-radius: 10px;padding: 0 10px;" :style="{backgroundColor:bgchander(scope.row),color:colorHander(scope.row)}">{{statusHander(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="Result">
          <template slot-scope="scope">
            <span style="height: 20px;line-height: 20px;border-radius: 10px;padding: 0 10px;" :style="{backgroundColor:resultBgchander(scope.row),color:resultColorHander(scope.row)}">{{resultHander(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="comments"
          label="Reason">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { GlobalTimeformat } from '@/utils/common'
export default {
  data () {
    return {
      appsDialogVisible: false,
      data: [],
      loading: false
    }
  },
  methods: {
    formatDate (time, str) {
      return GlobalTimeformat(time, 'HH:mm')
    },
    init (item) {
      this.appsDialogVisible = true
      this.getAppLogList(item.appId)
    },
    resetDialog () {
      Object.assign(this.$data, this.$options.data())
    },
    submitTypeHander (item) {
      var temp
      switch (item.submitType) {
        case 1:
          temp = 'Publish'
          break
        case 2:
          temp = 'Update'
          break
        case 3:
          temp = 'Cancel'
          break
        default:
          break
      }
      return temp
    },
    getAppLogList (appId) {
      let _self = this
      _self.loading = true
      var params = {
        appId: appId,
        current: 1,
        size: 9999
      }
      _self.$interface.reports.getAppLogListApi(params)
        .then(({ data: res }) => {
          _self.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.data = []
          this.data = res.data.records
        })
        .catch(() => { })
    },
    statusHander (item) {
      var temp
      switch (item.status) {
        case 1:
          temp = 'Processing'
          break
        case 2:
          temp = 'Closed'
          break
        default:
          break
      }
      return temp
    },
    bgchander (item) {
      var temp
      switch (item.status) {
        case 1:
          temp = '#FFF7E6'
          break
        case 2:
          temp = '#EEF5DC'
          break
        default:
          break
      }
      return temp
    },
    colorHander (item) {
      var temp
      switch (item.status) {
        case 1:
          temp = '#FBAB02'
          break
        case 2:
          temp = '#8BBB11'
          break
        default:
          break
      }
      return temp
    },
    resultHander (item) {
      if (Object.prototype.toString.call(item.result) === '[object Null]') {
        return ''
      }
      var temp
      switch (item.result) {
        case true:
          temp = 'Issued'
          break
        case false:
          temp = 'Refused'
          break
        default:
          break
      }
      return temp
    },
    resultBgchander (item) {
      var temp
      switch (item.result) {
        case true:
          temp = '#EEF5DC'
          break
        case false:
          temp = '#FFF1F0'
          break
        default:
          break
      }
      return temp
    },
    resultColorHander (item) {
      var temp
      switch (item.result) {
        case true:
          temp = '#8BBB11'
          break
        case false:
          temp = '#F56C6C'
          break
        default:
          break
      }
      return temp
    }
  }
}
</script>
